<template>
    <view>
        <z-paging ref="paging" :refresher-enabled="false">
            <v-headerview actionBarColor="#000000" :showBackIcon="true" titleColor="#000" pageTitle="积分兑换结算">
                <view class="" style="height: 172rpx;"></view>
                <view class="dange_dhjs_box">
                    <view class="t_box">兑换菜品</view>
                    <view class="c_box">
                        <view class="left_box">
                            <view class="image">
                                <image class="" :src="spObj.image" />
                            </view>
                            <view class="name_box">
                                <view class="top_box">{{ spObj.title }}</view>
                                <view class="bot_box">x 1</view>
                            </view>
                        </view>
                        <view class="right_box">
                            <view class="to_box">{{ spObj.integral * 1 }}</view>
                            <view class="bo_box">积分</view>
                        </view>
                    </view>
                    <view class="b_box">
                        <view class="kyjf_box">可用积分</view>
                        <view class="kyjfnum_box">{{ userInfo.integral * 1 }}</view>
                    </view>
                </view>

                <view class="bottom_box">
                    <view class="zj_box">
                        <view class="zjsy_box">
                            使用积分: <text style="font-size: 30rpx;color: #f64b43;font-weight: 700;">{{ spObj.integral * 1
                                }}</text>
                        </view>
                        <view class="gjcp_box">共计1个菜品</view>
                    </view>
                    <view class="sub_box" @click="submit">积分支付</view>
                </view>
            </v-headerview>
        </z-paging>
    </view>

</template>

<script>
export default {
    components: {},
    data() {
        return {
            dhId: '',//兑换商品id
            spObj: {},
            userInfo: {},
        };
    },
    onLoad(e) {
        this.dhId = e.id

    },
    onShow() {
        this.getList()
        this.getInfo()
    },
    methods: {
        getList() {
            this.$Request.get(this.$api.index.goods + `/${this.dhId}`).then(res => {
                this.spObj = res.data
            })
        },
        getInfo() {
            this.$Request.get(this.$api.user.users).then(res => {
                this.userInfo = res.data
            })
        },
        submit() {
            let that = this
            uni.showModal({
                title: "确定兑换？",
                success: function (res) {
                    if (res.confirm) {
                        let data = {
                            goods_sku_id: that.spObj.id,
                            num: 1
                        }
                        that.$Request.post(that.$api.index.ordersIntegralExchange, data).then(res => {
                            if (res.code == 200) {
                                that.$msg(res.msg)
                                setTimeout(()=>{
                                    that.$router('/redemption/cp')
                                },800)
                                that.getInfo()
                            }
                        })
                    } else {
                        console.log('取消')
                    }
                }
            })
        }
    }
};
</script>

<style lang="scss" scoped>
/deep/.zp-scroll-view-absolute {
    background-image: none !important;
    background-color: #f1f1f1 !important;
    position: relative !important;
}

.dange_dhjs_box {
    width: 700rpx;
    height: 300rpx;
    background-color: #fff;
    margin: auto;
    border-radius: 30rpx;


    .t_box {
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 24rpx;
        color: #989898;
        border-bottom: 1rpx solid #f1f1f1;
        box-sizing: border-box;
        padding: 0 20rpx;

    }

    .c_box {
        width: 100%;
        height: 180rpx;
        border-bottom: 1rpx solid #f1f1f1;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_box {
            width: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .image {
                width: 130rpx;
                height: 130rpx;
                border-radius: 10rpx;
                margin-right: 18rpx;

                image {
                    width: 130rpx;
                    height: 130rpx;
                    border-radius: 10rpx;
                }
            }

            .name_box {
                width: auto;
                height: 130rpx;

                .top_box {
                    width: auto;
                    height: 75rpx;
                    line-height: 90rpx;
                    color: #333;
                    font-size: 26rpx;
                }

                .bot_box {
                    width: auto;
                    height: 75rpx;
                    line-height: 40rpx;
                    font-size: 26rpx;
                    color: #333;
                }
            }
        }

        .right_box {
            width: auto;
            height: 130rpx;

            .to_box {
                width: auto;
                height: 75rpx;
                line-height: 90rpx;
                font-size: 30rpx;
                color: #f64b43;
            }

            .bo_box {
                width: auto;
                height: 75rpx;
                line-height: 40rpx;
                font-size: 22rpx;
                color: #989898;
            }
        }
    }

    .b_box {
        width: 100%;
        height: 60rpx;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .kyjf_box {
            width: auto;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 24rpx;
            color: #333;
        }

        .kyjfnum_box {
            width: auto;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 24rpx;
            color: #f64b43;
        }
    }
}

.bottom_box {
    position: fixed;
    width: 100%;
    height: 150rpx;
    border-radius: 30rpx 30rpx 0 0;
    background-color: #fff;
    bottom: 0;
    box-sizing: border-box;
    padding: 30rpx 40rpx 0 40rpx;
    display: flex;
    justify-content: space-between;

    .zj_box {
        width: auto;

        .zjsy_box {
            width: auto;
            height: 40rpx;
            line-height: 40rpx;
            font-size: 24rpx;
            color: #333;
        }

        .gjcp_box {
            width: auto;
            height: 20rpx;
            line-height: 20rpx;
            font-size: 20rpx;
            color: #989898;
        }
    }

    .sub_box {
        width: 180rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: #fff;
        background-color: #f64b43;
        border-radius: 30rpx;
    }
}
</style>